<template>
    <a-drawer
        :destroyOnClose="true"
        :title="title"
        :placement="placement"
        :closable="closable"
        :visible="visible"
        :maskClosable="maskClosable"
        :width="width"
        @close="cancel">
        <a-spin :spinning="confirmLoading">
        <bpmn-modeler
            ref="refNode"
            :xml="xml"
            :users="users"
            :groups="groups"
            :categorys="categorys"
            :is-view="false"
            @save="saveModeler"
        />
<!-- 
        <div class="drawer-bootom-button">
            <a-popconfirm title="确定放弃操作？" @confirm="cancel" okText="确定" cancelText="取消">
                <a-button shape="round" style="margin-right: .8rem">取消</a-button>
            </a-popconfirm>
            <a-button shape="round" @click="ok" type="primary" >提交</a-button>
        </div>
-->
        </a-spin>
    </a-drawer>
</template>

<script>
import bpmnModeler from '../index'
import request from '@/utils/flowRequest'
import notification from 'ant-design-vue/es/notification'

export default {
    name:'drawerModeler',
    components: {
        bpmnModeler
    },
    props:{
        title:String,
        placement:{
            type:String,
            default:'right'
        },
        closable:{
            type:Boolean,
            default:true
        },
        maskClosable:{
            type:Boolean,
            default:true
        }
    },
    data() {
        return {
            visible: false,
            confirmLoading: false,
            url: {
                save: '/actReModel/saveModel',
                queryById: '/actReModel/queryById'
            },
            template: null,//模板数据对象
            xml: '',//后端查询到的xml
            users: [{name:'动态指派', id:'${assignee}'}, {name:'管理员', id: '1'}, {name:'请选择', id: ''}],
            groups: [],
            categorys: [
                { name: '业务', id: 'oa' },
            ],
            width:document.documentElement.clientWidth,
        }
    },
    mounted() {
        //this.getModelDetail()
    },
    methods: {
        open(id) {
            this.visible = true;
            //this.$refs['refNode'].newDiagram()
            if (id) {
                this.getModelDetail(id)
            }
        },
        ok(){
            this.$emit('handleOk');
        },
        cancel(){
            this.visible = false
            this.xml = ''
            this.template = null
            this.$emit('handleCancel');
        },
        getModelDetail(id) {
            this.confirmLoading = true
            request.get(this.url.queryById,{params:{keyId: id}}).then(res => {
                if(res.success){
                    this.template = res.result
                    this.xml = res.result.templateContent
                    //this.$message.success(res.message);
                } else {
                    notification.error({ message: '系统提示', description: res.message || "执行出现错误"})
                }
            }).finally(() =>{
                this.confirmLoading = false
            })
        // fetch('https://cdn.jsdelivr.net/gh/goldsubmarine/workflow-bpmn-modeler@master/src/Leave.bpmn20.xml')
        //   .then(response => {
        //     return response.text()
        //   }).then(xml => {
        //     this.xml = xml
        //   })
        },
        saveModeler(data) {
            // console.log(data)
            let param
            if (this.template) {
                param = this.template
            } else {
                param = {}
            }
            if (param.keyId && param.keyId != data.process.id) {
                notification.error({ message: '系统提示', description: "模板ID不能修改!"})
                return false;
            } else if (!param.keyId) {
                param.keyId = data.process.id
            }
            param.templateCategory = data.process.category
            param.templateName = data.process.name
            param.systemNo = data.process.systemNo
            param.formPath = data.process.formPath
            param.templateContent = data.xml

            this.confirmLoading = true
            request({url: this.url.save, method: 'post', data:param}).then(res => {
                if(res.success){
                    this.$message.success(res.message);
                } else {
                    notification.error({ message: '系统提示', description: res.message || "执行出现错误"})
                }
            }).finally(() =>{
                this.confirmLoading = false
            })
        }
    }
}
</script>


